<template>
  <el-main class="basic-config">
    <div class="basic-box">
            <div class="basic-box-title">联系信息</div>
            <div class="basic-box-title-h2 sa-m-t-16 sa-m-l-6">紧急联系人
                <el-button class="title-btn sa-m-l-14" type="text" @click="status.flag1 = false">修改</el-button>
            </div>
            <div class="basic-flex">
                <div class="basic-box-item sa-flex">
                    <div class="basic-box-item-label"><span>*</span>姓名：</div>
                    <div class="basic-box-item-text" v-if="status.flag1">--</div>
                    <el-input class="basic-input" placeholder="请输入姓名" v-else></el-input>
                </div>
                <div class="basic-box-item sa-flex">
                    <div class="basic-box-item-label"><span>*</span>手机号：</div>
                    <div class="basic-box-item-text" v-if="status.flag1">--</div>
                    <el-input class="basic-input" placeholder="请输入手机号" v-else></el-input>
                </div>
            </div>
            <div class="basic-box-item sa-flex">
              <div class="basic-box-item-label">电子邮件：</div>
              <div class="basic-box-item-text" v-if="status.flag1">--</div>
              <el-input class="basic-input" placeholder="请输入电子邮件" v-else></el-input>
            </div>
            <div class="basic-box-item sa-flex" v-if="!status.flag1">
                <el-button type="primary" @click="status.flag1 = true">保存</el-button>
                <el-button @click="status.flag1 = true">取消</el-button>
            </div>
            <div class="basic-box-title-h2 sa-m-t-16 sa-m-l-6">上级联系人
                <el-button class="title-btn sa-m-l-14" type="text" @click="status.flag2 = false">修改</el-button>
            </div>
            <div class="basic-flex">
                <div class="basic-box-item sa-flex">
                    <div class="basic-box-item-label"><span>*</span>姓名：</div>
                    <div class="basic-box-item-text" v-if="status.flag2">--</div>
                    <el-input class="basic-input" placeholder="请输入姓名" v-else></el-input>
                </div>
                <div class="basic-box-item sa-flex">
                    <div class="basic-box-item-label"><span>*</span>手机号：</div>
                    <div class="basic-box-item-text" v-if="status.flag2">--</div>
                    <el-input class="basic-input" placeholder="请输入手机号" v-else></el-input>
                </div>
            </div>
            <div class="basic-flex">
                <div class="basic-box-item sa-flex">
                    <div class="basic-box-item-label"><span>*</span>电子邮件：</div>
                    <div class="basic-box-item-text" v-if="status.flag2">--</div>
                    <el-input class="basic-input" placeholder="请输入电子邮件" v-else></el-input>
                </div>
                <div class="basic-box-item sa-flex">
                    <div class="basic-box-item-label"><span>*</span>QQ：</div>
                    <div class="basic-box-item-text" v-if="status.flag2">--</div>
                    <el-input class="basic-input" placeholder="请输入QQ" v-else></el-input>
                </div>
            </div>
            <div class="basic-box-item sa-flex">
                    <div class="basic-box-item-label"><span>*</span>座机：</div>
                    <div class="basic-box-item-text" v-if="status.flag2">--</div>
                    <el-input class="basic-input" placeholder="请输入座机" v-else></el-input>
                </div>
            <div class="basic-box-item sa-flex" v-if="!status.flag2">
                <el-button type="primary" @click="status.flag2 = true">保存</el-button>
                <el-button @click="status.flag2 = true">取消</el-button>
            </div>
          </div>
  </el-main>
</template>

<script setup>
  import { reactive, onMounted } from 'vue';
  import {api} from '../info.service'
  import { checkUrl } from '@/sheep/utils/checkUrlSuffix';

  const state = reactive({
    data: null,
  });
  const status = reactive({
    flag1:true,
    flag2:true
  })
  onMounted(() => {
    getData();
  });

  const getData = async () => {
    const {error,data} = await api.basic.info()
    if (error === 0) {
      state.data = data
    }
  };
</script>

<style lang="scss" scoped>

  .basic-box {
    .basic-box-title {
      width: max-content;
      font-family: 'PingFangSC-Regular, sans-serif';
      color: #3D3D3D;
      z-index: 0;
      font-size: 20px;
      font-weight: bold;
    }
    .basic-box-title-h2{
        width: max-content;
        font-family: 'PingFangSC-Regular, sans-serif';
        color: #3D3D3D;
        z-index: 0;
        font-size: 20px;
        display: flex;
        align-items: center;
        .title-btn{
            font-size: 16px;
        }
    }

    .basic-box-title::after {
    //   pointer-events: none;
    //   content: "";
    //   position: absolute;
    //   height: 8px;
    //   background: var(--t-bg-active);
    //   bottom: 0;
    //   right: 0;
    //   left: 0;
    //   z-index: -1;
    }

    .basic-box-item {
      padding-left: 40px;
      margin-top: 20px;
      min-width: 800px;
      .basic-input{
        width: 300px;
      }
      .basic-box-item-label {
        min-width: 100px;
        font-family: 'PingFangSC-Regular, sans-serif';
        font-size: 14px;
        margin-right: 20px;
        display: flex;
        justify-content: flex-end;
        span{
            color: red;
        }
      }

      .basic-box-item-text {
        font-family: 'PingFangSC-Regular, sans-serif';
        font-size: 14px;
        color: #3D3D3D;
      }

      .basic-box-item-image {
        width: 225px;
        height: 150px;
        margin-right: 40px;
      }
    }
  }
  .basic-flex{
    display: flex;
  }
</style>
